@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.type-tips {
    /*background: rgba(0, 0, 0, 0.618);*/
    background: rgba(240, 249, 235, 1);
    color: rgba(103, 194, 58, 1);
    font-size: 14px;
    left: 50%;
    top: 6%;
}

.type-error {
    /*background: rgba(0, 0, 0, 0.8);*/
    background: rgba(255, 240, 240, 1);
    color: rgba(245, 108, 108, 1);
    font-size: 15px;
    left: 50%;
    top: 10%;
}

.web-toast {
    position: fixed;
    line-height: 1;
    padding: 10px;
    border-radius: 3px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 9999;
    white-space: nowrap;
}

.fadeOut {
    animation: fadeOut .5s;
}

.fadeIn {
    animation: fadeIn .5s;
}